<template>
  <div class="container" ref="mainCon">
    <topTitle
      :titleText="titleText"
      @gobackTriser="goBack"
      :back="back"
    ></topTitle>
    <div class="mainCon">
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          @row-click="singleElection"
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column label="选择任务" width="100">
            <template slot-scope="scope">
              <el-radio
                class="radio"
                v-model="templateSelection"
                :label="scope.$index"
                >&nbsp;</el-radio
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="jobNumber"
            label="任务编号"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="fieldTypeDesc"
            label="单位类型"
            :formatter="formatTd"
          ></el-table-column>
          <!-- <el-table-column prop="unitName" label="巡查单位名称" :formatter="formatTd"></el-table-column> -->
          <!-- <el-table-column prop="companyName" label="巡查单位名称" v-if = "domain != 'JZ'" :key="1" :formatter="formatTd"></el-table-column> -->
          <el-table-column
            label="巡查单位名称"
            width="230"
            v-if="domain != 'JZ'"
            :key="1"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.companyName"
                :columnName="'companyName'"
              ></copyText>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="projectName" label="巡查单位名称" v-if = "domain == 'JZ'" :key="2" :formatter="formatTd"></el-table-column> -->
          <el-table-column
            label="巡查单位名称"
            width="230"
            v-if="domain == 'JZ'"
            :key="2"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="jobUserName" label="任务人员" :formatter="formatTd"></el-table-column> -->
          <el-table-column label="任务人员" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.jobUserName"
                :columnName="'jobUserName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="statusDesc"
            label="任务状态"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="endDate"
            label="截止日期"
            :formatter="formatTd"
          ></el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
        <el-row
          style="text-align: center; margin-top: 20px; margin-bottom: 40px"
        >
          <el-button
            class="commonBut saveBtn"
            type="primary"
            v-sdc
            @click="goNext"
            >下一步</el-button
          >
          <el-button class="commonBut" @click="goBack">取消创建</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
// import scrollTable from '@/mixin/scrollTable.js';

export default {
  name: 'patrolAddFirst',
  // mixins: [scrollTable],
  data() {
    return {
      titleText: '创建巡查',
      back: true,
      templateSelection: '',
      checkId: '',
      tableList: [],
      requestUrl: 'api-gov/ipqccompany/findIpqcJoblist',
      filterField: {
        fieldType: '', //fieldType:NC/CS
      },
      isShow: false, //列表加载
      loading: false,
      domain: '',
      taskType: '', //日常/专项巡查
      hiddleToolBar: false,
      tableHeight: null,
    }
  },
  created() {
    this.taskType = this.$route.query.taskType || this.taskType
    //区分建筑与非建
    this.domain = this.$route.query.domain
    this.filterField.fieldType = this.domain == 'JZ' ? 'CS' : 'NC'
    if (this.taskType == 'SPECIAL') {
      this.filterField.taskType = 'SPECIAL'
    } else {
      this.filterField.taskType = 'DAILY'
    }
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
    let that = this
    this.$nextTick(function () {
      let tableHeightCur = this.$refs.tableBox1.$el.clientHeight
      let tableTop = this.$refs.tableBox.getBoundingClientRect().top
      if (tableHeightCur + tableTop > window.innerHeight) {
        this.tableHeight =
          this.$refs.mainCon.getBoundingClientRect().height - 86
      } else {
        document.getElementsByClassName('tableBoxCur').length &&
          (document.getElementsByClassName('tableBoxCur')[0].style.height =
            window.innerHeight - tableTop - 28 + 'px')
      }
      window.onresize = function () {
        if (!that.$refs.tableBox1) {
          return
        }
        let tableHeightCur = that.$refs.tableBox1.$el.clientHeight
        let tableTop = that.$refs.tableBox.getBoundingClientRect().top
        if (tableHeightCur + tableTop > window.innerHeight) {
          that.tableHeight =
            that.$refs.mainCon.getBoundingClientRect().height - 86
        } else {
          document.getElementsByClassName('tableBoxCur').length &&
            (document.getElementsByClassName('tableBoxCur')[0].style.height =
              window.innerHeight - tableTop - 40 + 'px')
        }
      }
    })
  },
  activated() {
    // this.getEventType();
    window.addEventListener('scroll', this.handleScroll, true)
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
      this.$refs.tableBox1.doLayout()
    })
  },
  deactivated() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  beforeDestroy() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  methods: {
    goBack() {
      if (this.taskType == 'SPECIAL') {
        this.$router.push({
          path: '/home/patrol/patrolListSpecial',
          name: 'patrolListSpecial',
          query: {
            domain: this.domain,
          },
        })
      } else {
        this.$router.push({
          path: '/home/patrol/patrolList',
          name: 'patrolList',
          query: {
            domain: this.domain,
          },
        })
      }
      this.tabChoose()
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    singleElection(row) {
      this.checkId = row.id
    },
    goNext() {
      //未选择任务无法进行下一步
      if (!this.checkId) {
        this.$message({
          message: '请先选择任务',
          type: 'warning',
        })
        return
      }
      this.$router.push({
        path: '/home/patrol/patrolAddNext',
        name: 'patrolAddNext',
        query: {
          domain: this.domain,
          taskId: this.checkId,
          taskType: this.taskType,
        },
      })
      this.tabChoose()
    },
    //日常、专项tab 选中问题
    tabChoose() {
      var oldUrl =
        this.taskType == 'SPECIAL'
          ? '/home/patrol/patrolListSpecial'
          : '/home/patrol/patrolList'
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: oldUrl,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    handleScroll(e) {
      this.$nextTick(function () {
        if (
          this.$refs.tableBox &&
          this.$refs.tableBox.getBoundingClientRect().top < 128
        ) {
          // this.tableHeight = this.$refs.mainCon.getBoundingClientRect().height - 84
          this.tableHeight = window.innerHeight - 295
          if (document.getElementsByClassName('tableBoxCur').length) {
            document.getElementsByClassName('tableBoxCur')[0].style.height =
              null
          }
          this.hiddleToolBar = true
        } else {
          this.hiddleToolBar = false
        }
      })
    },
  },
}
</script>
<style scoped lang="less">
.mainCon {
  top: 198px;
  padding-top: 0;
}
</style>
